<template>
    <div class="top">  
        <loading :show="cicle"></loading>
        <div v-for = "article in articles">
            {{ article.title }} 
        </div>
    
    </div>
</template>
<script>
    import Vue from 'vue'
    import VueResource from 'vue-resource'
    import Loading from '@/components/Loading'

    Vue.use(VueResource);
    
    export default {
        name: 'TopMovie',
        data () {
            return {
                articles: [],
                isVisible: false,
                cicle: false
            }
        },

        mounted: function() {
            this.cicle = true;
            this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=250', {
                headers: {

                },
                emulateJSON: true
            }).then((res) => {
                    this.articles = res.data.subjects;
                    this.cicle = false; 
                    console.log(this.cicle);
            },
            res => {
                console.log(res);
            })
        },

        components: { Loading }
    }
</script>

<style scoped>
        h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>